@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

/* stylelint-disable no-descending-specificity */

$sizes: 's', 'm', 'l';
$variants: 'single-line-container', 'multi-line-container';

@mixin validationState($state, $rainbowColor, $bgDefault) {
  &[data-validation='#{$state}'] {
    background-color: simple-var($theme-variables, 'sys', $bgDefault, 'background1-level');
    border-color: simple-var($theme-variables, 'sys', $bgDefault, 'decor-default');

    &:hover {
      background-color: $sys-neutral-background2-level;
      border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
    }

    &:not([data-readonly]) {
      &:focus-within,
      &[data-focused] {
        &:not([data-disabled]) {
          @include outline-var($container-focused-m);

          background-color: simple-var($sys-neutral-background2-level);
          border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'accent-default');
          outline-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-activated');
        }
      }
    }
  }
}

.container {
  @include validationState('default', 'primary', 'neutral');
  @include validationState('error', 'red', 'red');
  @include validationState('warning', 'yellow', 'yellow');
  @include validationState('success', 'green', 'green');

  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;

  border-style: solid;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($fields, 'container', $size);

      &,
      input,
      select,
      textarea,
      span {
        @include composite-var($theme-variables, 'sans', 'body', $size);
      }

      @each $variant in $variants {
        &[data-variant='#{$variant}'] {
          @include composite-var($fields, $variant, $size);
        }
      }
    }
  }

  &[data-selectable] {
    &,
    input,
    select,
    textarea,
    span {
      cursor: pointer;
    }
  }

  &[data-readonly] {
    &,
    input,
    select,
    textarea,
    span {
      cursor: default;
    }

    &,
    &:hover {
      background-color: simple-var($sys-neutral-decor-disabled);
      border-color: simple-var($sys-neutral-decor-disabled);
    }

    &:focus-within,
    &[data-focused] {
      @include outline-var($container-focused-m);

      background-color: simple-var($sys-neutral-decor-disabled);
      border-color: simple-var($sys-neutral-decor-disabled);
      outline: none;
    }
  }

  &[data-disabled] {
    &,
    input,
    select,
    textarea,
    span {
      cursor: not-allowed;
      background-color: simple-var($sys-neutral-background);
    }

    &,
    &:focus-within,
    &[data-focused],
    &:hover {
      background-color: simple-var($sys-neutral-background);
      border-color: simple-var($sys-neutral-decor-disabled);
      outline: none;
    }
  }
}

.prefix {
  display: inline-flex;
  flex-shrink: 0;
  color: $sys-neutral-text-disabled;
}

.postfix {
  display: inline-flex;
  flex-shrink: 0;
  gap: $space-fields-postfix-gap;
}
